import './style'
import React, { Component } from 'react'
import Loading from 'src/components/loading'
import Toast from 'src/components/toast'
import $http, {shareURL} from 'src/assets/js/api'
import NativeJsBridge from 'src/assets/js/bridge'

class ViewCoupon extends Component {
	constructor(props) {
		super(props)

		this.state = {
			run: '',
			coupon: false,
			success: '',
			hasCoupon: '',
			mobile: this.props.match.params.mobile,
			buttonStatus: this.props.match.params.coupon || '0' //0 不可点击， 1领取， 2分享
		}
	}


	shouldComponentUpdate(nextProps, nextState) {
		return true
	}

	componentDidMount(){
		if(this.state.buttonStatus === '2'){
			setTimeout(() => {
				this.setState({
					hasCoupon: 'hasCoupon'
				})
			}, 500)
		}else{
			setTimeout(() => {
				this.runAnimation()
			}, 100)
		}
	}

	runAnimation(){
		this.setState({
			run: 'run'
		})

		setTimeout(() => {
			this.setState({
				buttonStatus: '1'
			})
		}, 3500)
	}

	onGetCouponHandler(){
		Loading.show()
		return $http.request({
			url: 'h5/facedH5/anniversaryActivity/draw',
	        method: 'post',
            data:{
                mobile: this.state.mobile,
                optType: "0",
                requestId: new Date().getTime()
            },
            headers: {
                "Accept": "application/json;version=3.0;compress=false",
                "Content-Type": "application/json;charset=utf-8",
            }
        }).then((res) => {
        	Loading.hide()
        	if(res.data.resCode === "000000"){
                this.setState({
					success: 'success',
					buttonStatus: '2'
				})
            }else{
            	Toast.show(res.data.resMsg)
            }
        }).catch((err) =>{
        	Loading.hide()
        	Toast.show('系统异常，请稍后再试')
        })
	}

	onShareHandler(){
		// 设置title
		NativeJsBridge.win.setTitle({
			title: '豪车限时抢'
		});

		// 设置分享
		NativeJsBridge.addRightBtn({
			btnText: '分享',
			callback: () => {
				NativeJsBridge.share({
					shareTitle: '凹凸3周年',
	                text: '凹凸3周年',
	                url: shareURL, // 分享链接
                    sharePicUrl: 'share.img', // 分享图标
                    sourceType: 6,
	                ways: "weixinFriend,friendsCircle",
	                success: () => {
	                	Toast.show("分享成功")

	                	return $http.request({
							url: 'h5/facedH5/anniversaryActivity/statistic',
					        method: 'post',
				            data:{
				                mobile: this.state.mobile,
				                viewNo: "",
				                viewType: '2',
				                requestId: new Date().getTime()
				            },
				            headers: {
				                "Accept": "application/json;version=3.0;compress=false",
				                "Content-Type": "application/json;charset=utf-8",
				            }
				        })
	                }
				})
			}
		});
	}

	render() {
		const { run, success, buttonStatus, mobile, hasCoupon } = this.state

		return (
			<div className={"view-coupon view " +  `${ run + " " + success + " " + hasCoupon}` }>
				<div className="redpackshadow"></div>
				<div className="slogan">
					<div className="slogan__one"></div>
					<div className="slogan__two"></div>
					<div className="slogan__three"></div>
					<p className="slogan__text">3年30城，感恩所有凹凸曼的陪伴！</p>
				</div>
				<div className="coupon">
					<div className="coupon__bg1"></div>
					<div className="coupon__bg2"></div>
					<div className="coupon__money">
						<div className="coupon__money__inner">
							<h2><span>￥</span>300</h2>
							<h6>新开城市优惠券</h6>
						</div>
						<div className="coupon__money__one"></div>
						<div className="coupon__money__two"></div>
					</div>
				</div>
				<ul className="couponlist">
					<li className="couponlist__cell">
						<h2><em>￥</em>50</h2>
						<span>新开城市优惠券</span>
					</li>
					<li className="couponlist__cell">
						<h2>满300减100</h2>
						<span>新开城市优惠券</span>
					</li>
					<li className="couponlist__cell">
						<h2>满600减150</h2>
						<span>新开城市优惠券</span>
					</li>
				</ul>
				<div className="text">
					<p className="text__success">
						领取成功！券已放入帐号
					</p>
					{
						buttonStatus === '2'? <a className="text__button" href="javascript:;" onClick={ this.onShareHandler.bind(this) }>分享好友拿更多优惠</a>:  buttonStatus === '1'? <a className="text__button" href="javascript:;" onClick={ this.onGetCouponHandler.bind(this) }>立即领取</a>: <a className="text__button none" href="javascript:;">立即领取</a>
					}
					<div className="text__city">
						<p>新开城市：成都、重庆、大连、东莞、福州、哈尔滨、海口、</p>
						<p>呼和浩特、济南、洛阳、南昌、南通、青岛、三亚、上饶、</p>
						<p>沈阳、苏州、太原、天津、武汉、无锡、厦门、西安、郑州。</p>
					</div>
				</div>
			</div>
		)
	}
}

export default ViewCoupon